<template>
  <ul class="prolist">
    <!-- 编程式跳转 使用js的跳转方式  -->
    <li class="proitem" v-for="(item, index) of prolist" @click="goDetail(item.id)" :key="item.id">
      <div class="itemImg">
        <img :src="item.images.small" alt="">
      </div>
      <div class="itemInfo">
        <p>
          {{ index }} -{{ item.title }}
        </p>
        <span class="price">{{ Math.round((item.collect_count) * 0.88) | moneyFilter}}</span>
        <span class="fprice">{{ item.collect_count | moneyFilter}}</span>
      </div>
    </li>
  </ul>
</template>

<script>
// import Rating from './Rating'
export default {
  // props: ['prolist']
  props: {
    prolist: Array
  },
  components: {
    // Rating
  },
  methods: {
    goDetail (id) {
      this.$router.push({ path: '/detail/' + id })
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';

.prolist {
  @include flexbox();   
  @include justify-content(space-around);
  @include flex-wrap(wrap);
  .proitem {
    @include rect(1.5rem,2rem);
    margin: 0.1rem 0 ;
    .itemImg {
      @include rect(1.5rem,1.5rem);
      img {
        @include rect(1.5rem,1.5rem);
      }
    }
    .itemInfo {
      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .price {
        color: red;
        margin-top: 0.1rem;
      }
      .fprice {
        color:#aaa;
        text-decoration: line-through;
      }
    }
  }
}
</style>
